<template>
	<view>
		<view>
			<view class="d-p-l-30 d-p-r-30 d-flex d-font-28 d-sel" style="color: #5D6672;">
				<template v-for="(item, index) in options">
					<view
						class="d-flex-1 d-box"
						:key="index"
						@click="showIndex(index)"
						:style="{
							backgroundColor: _show(index) ? '#21A5F3' : '#ffffff',
							color: !_show(index) ? '#5D6672' : '#ffffff'
						}"
					>
						<view class="d-flex" style="height: 68rpx;">
							<text class="d-flex-1 u-line-1" :style="{
								maxWidth: ((690/options.length) - 100)+'rpx'
							}">{{ showName[index] }}</text>
							<u-icon v-if="!_show(index)" name="arrow-down-fill" size="28rpx" color="#DFDFDF"></u-icon>
							<u-icon v-else name="arrow-up-fill" size="28rpx" color="#ffffff"></u-icon>
						</view>
						<u-transition :show="_show(index)">
							<scroll-view class="select-box" scroll-y="true" style="color: #5D6672;max-height: 45vh;">
								<view
									@click="selectItem(index, '-1')"
									:style="{
										color: nodeIndex[index] == 0 ? '#fff' : '#5D6672',
										backgroundColor: nodeIndex[index] == 0 ? '#21A5F3' : '#fff'
									}"
									class="d-item"
								>
									全部
								</view>
								<view
									@click="selectItem(index, ke)"
									:style="{
										color: nodeIndex[index] == ke + 1 ? '#fff' : '#5D6672',
										backgroundColor: nodeIndex[index] == ke + 1 ? '#21A5F3' : '#fff'
									}"
									class="d-item"
									v-for="(it, ke) in item[children]"
									:key="ke"
								>
									{{ it[label] }}
								</view>
							</scroll-view>
						</u-transition>
					</view>
					<u-line v-if="options.length - 1 != index" direction="col" length="68rpx"></u-line>
				</template>
			</view>
		</view>
		<u-gap height="68rpx" bgColor="#FBFCFC"></u-gap>
	</view>
</template>

<script>
export default {
	name: 'd-select',
	props: {
		// 数据
		options: {
			type: Array,
			default() {
				return [];
			}
		},
		// 显示字段name
		label: {
			type: String,
			default: 'label'
		},
		// 子级字段name
		children: {
			type: String,
			default: 'children'
		},
		// 返回名称的name
		query: {
			type: String,
			default: 'name'
		},
		// 返回值的name
		value: {
			type: String,
			default: 'id'
		}
	},
	data() {
		return {
			nodeIndex: [],
			showName: [],
			showController: [],
			params: {}
		};
	},
	created() {
		this.init();
	},
	watch: {
		options(newValue, oldValue) {
			this.init();
		}
	},
	methods: {
		init() {
			let showName = this.options.map(e => {
				return e[this.label];
			});
			this.showName = showName;
			let showController = new Array(showName.length);
			let nodeIndex = new Array(showName.length);
			for (let i in showName) {
				showController[i] = false;
				nodeIndex[i] = 0;
			}
			this.showController = showController;
			this.nodeIndex = nodeIndex;
		},
		showIndex(index) {
			let showController = this.showController;
			// 如果是显示状态 那么关闭之前打开的
			if (!showController[index]) {
				for (let i in showController) {
					if (i != index) {
						showController[i] = false;
					}
				}
			}
			showController[index] = !showController[index];
			this.showController = showController;
			this.$forceUpdate();
		},
		selectItem(index, ke) {
			if (ke == '-1') {
				this.showName[index] = this.options[index][this.label];
				this.params[this.options[index][this.query]] = null;
			} else {
				this.showName[index] = this.options[index][this.children][ke][this.label];
				this.params[this.options[index][this.query]] = this.options[index][this.children][ke][this.value];
			}
			this.nodeIndex[index] = Number(ke) + 1;
			this.$emit('query', this.params);
		}
	},
	computed: {
		_show() {
			return function(index) {
				return this.showController[index] ? true : false;
			};
		}
	}
};
</script>

<style lang="scss">
.d-sel {
	position: fixed;
	left: 0;
	right: 0;
	background-color: #ffffff;
	z-index: 999;
	.d-box {
		height: 68rpx;
		padding: 0 30rpx;
		position: relative;
		.select-box {
			position: absolute;
			top: 68rpx;
			left: 0rpx;
			right: 0rpx;
			box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
			border-radius: 0rpx 0rpx 10rpx 10rpx;
			background-color: #ffffff;
			.d-item {
				padding: 20rpx 30rpx;
				// line-height: 80rpx;
			}
		}
	}
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>
